{% extends 'base.html' %}

{% block content %}
<body>
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>目标列表</legend>
  </fieldset>

  <div class="layui-form-item">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" style="margin-left: 2%;">设置代理</button>
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">开始扫描</button>
  </div>

  <div class="layui-form-item layui-form-text">
      <textarea placeholder="请输入目标URL" class="layui-textarea" style="margin-left: 2%;width: 95%;"></textarea>
  </div>

  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>扫描选项</legend>
  </fieldset>
  
  <div id="test1" class="demo-transfer" style="margin-left: 2%;"></div>

  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>扫描结果</legend>
  </fieldset>
  <table style="margin-left: 2%;" id="demo" lay-filter="test" ></table>
<script>
layui.use(['transfer','table'], function(){
  var transfer = layui.transfer;
  var table = layui.table;

  //渲染表格
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: '/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, fixed: 'left'}
      ,{field: 'username', title: '目标地址', width:200}
      ,{field: 'sex', title: '漏洞名称', width:200, sort: true}
    ]]
  });

     
      //渲染
      transfer.render({
        elem: '#test1'  //绑定元素
        ,title: ['全部POC', '扫描队列']  //自定义标题
        ,showSearch: true//显示搜索框
        ,data: [
          {"title": "李白", "disabled": "", "checked": ""}
          ,{"title": "杜甫", "disabled": "", "checked": ""}
          ,{ "title": "温酒", "disabled": "", "checked": ""}
        ]
        ,id: 'demo1' //定义索引,即第几个框
      });
    });
</script>
</body>
{% endblock %}